  <template>
    <div class="singer-intro">
        <div>
            <h2>简介</h2>
            <div>{{desc}}</div>
        </div>
        
        <div>
            <h2>基本资料</h2>
        </div>
        <div  v-for="(item, index)  in basicItem" :key="index">
            <span>{{ item.key }}</span>
            <span style="white-space: pre-wrap">{{ item.value }}</span>
        </div>
        <div  v-for="(item, index)  in otherItem" :key="index">
            <span>{{ item.key }}</span>
            <span style="white-space: pre-wrap">{{ item.value }}</span>
        </div>

    </div>
  </template>
  <script>
  export default{
    props:["singerId"],
    data(){
        return{
            desc:"",
            basicItem:[],
            otherItem:[],
        }
    },
    created() {
    this.getData()
  },
  methods: {
    //获取推荐歌单数据
    getData() {
      this.$request('get','/singer/desc',{
       singermid: this.singerId
      })
      .then(res=> {
        console.log(res)
        this.desc = res.data.desc
        this.basicItem = res.data.basic.item
        this.otherItem = res.data.other.item

      })
    },   
  },
  }
</script>
<style scoped>
.singer-intro {
    text-align: left;
    padding: 0 1rem;
}
</style>